<template>
  <div class="task-management-container">
    <!-- 顶部标题栏 -->
    <div class="header">
      <div class="system-title">
        <i class="el-icon-cpu"></i>
        <h1>特种车辆设备故障智能分析系统</h1>
      </div>
      <div class="user-info">
        <el-avatar :size="40" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
        <span>管理员</span>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
      <!-- 左侧规则引擎配置区 -->
      <div class="rule-engine-panel">
        <h2 class="panel-title">规则引擎配置</h2>
        <div class="rule-config">
          <el-tabs v-model="activeRuleTab" class="rule-tabs">
            <el-tab-pane label="弹药规则" name="ammo">
              <el-form label-position="top">
                <el-form-item label="弹药类型">
                  <el-select v-model="ammoType" placeholder="请选择弹药类型">
                    <el-option label="穿甲弹" value="armor-piercing"></el-option>
                    <el-option label="高爆弹" value="high-explosive"></el-option>
                    <el-option label="烟雾弹" value="smoke"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="消耗阈值">
                  <el-slider v-model="ammoThreshold" :min="0" :max="100" show-input></el-slider>
                </el-form-item>
                <el-form-item label="故障规则">
                  <el-checkbox-group v-model="ammoRules">
                    <el-checkbox label="高温告警"></el-checkbox>
                    <el-checkbox label="湿度超标"></el-checkbox>
                    <el-checkbox label="存储超期"></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-form>
            </el-tab-pane>

            <el-tab-pane label="导弹规则" name="missile">
              <el-form label-position="top">
                <el-form-item label="导弹类型">
                  <el-select v-model="missileType" placeholder="请选择导弹类型">
                    <el-option label="地对空导弹" value="surface-to-air"></el-option>
                    <el-option label="反坦克导弹" value="anti-tank"></el-option>
                    <el-option label="巡航导弹" value="cruise"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="维护周期">
                  <el-input-number v-model="maintenanceCycle" :min="30" :max="365" controls-position="right"></el-input-number>
                  <span>天</span>
                </el-form-item>
                <el-form-item label="故障规则">
                  <el-checkbox-group v-model="missileRules">
                    <el-checkbox label="制导系统异常"></el-checkbox>
                    <el-checkbox label="推进剂泄漏"></el-checkbox>
                    <el-checkbox label="电子元件故障"></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>

          <div class="rule-actions">
            <el-button type="primary" icon="el-icon-check">应用规则</el-button>
            <el-button icon="el-icon-refresh">重置</el-button>
          </div>
        </div>
      </div>

      <!-- 中间任务管理列表 -->
      <div class="task-list-panel">
        <div class="panel-header">
          <h2 class="panel-title">任务管理列表</h2>
          <div class="task-filters">
            <el-select v-model="taskFilter" placeholder="任务状态" clearable>
              <el-option label="待下发" value="pending"></el-option>
              <el-option label="执行中" value="executing"></el-option>
              <el-option label="已完成" value="completed"></el-option>
              <el-option label="已取消" value="canceled"></el-option>
            </el-select>
            <el-date-picker
                v-model="dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
            <el-button type="primary" icon="el-icon-search">搜索</el-button>
          </div>
        </div>

        <el-table :data="filteredTasks" style="width: 100%" height="calc(100% - 120px)">
          <el-table-column prop="id" label="任务ID" width="100"></el-table-column>
          <el-table-column prop="name" label="任务名称" width="180"></el-table-column>
          <el-table-column label="任务类型" width="120">
            <template #default="scope">
              <el-tag :type="scope.row.type === '弹药' ? 'danger' : 'warning'">
                {{ scope.row.type }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="vehicle" label="特种车辆" width="150"></el-table-column>
          <el-table-column label="状态" width="120">
            <template #default="scope">
              <el-tag :type="statusTagType(scope.row.status)">
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
          <el-table-column label="操作" width="150">
            <template #default="scope">
              <el-button size="small" @click="viewTaskDetail(scope.row)">详情</el-button>
              <el-button
                  size="small"
                  type="primary"
                  v-if="scope.row.status === '待下发'"
                  @click="dispatchTask(scope.row)">
                下发
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="task-statistics">
          <div class="stat-card">
            <div class="stat-value">{{ taskStats.total }}</div>
            <div class="stat-label">总任务数</div>
          </div>
          <div class="stat-card">
            <div class="stat-value" style="color: #e6a23c">{{ taskStats.pending }}</div>
            <div class="stat-label">待下发</div>
          </div>
          <div class="stat-card">
            <div class="stat-value" style="color: #409EFF">{{ taskStats.executing }}</div>
            <div class="stat-label">执行中</div>
          </div>
          <div class="stat-card">
            <div class="stat-value" style="color: #67C23A">{{ taskStats.completed }}</div>
            <div class="stat-label">已完成</div>
          </div>
        </div>
      </div>

      <!-- 右侧任务详情 -->
      <div class="task-detail-panel">
        <h2 class="panel-title">任务详情</h2>

        <div v-if="selectedTask" class="detail-content">
          <div class="detail-section">
            <h3>基本信息</h3>
            <div class="detail-row">
              <span class="label">任务ID:</span>
              <span class="value">{{ selectedTask.id }}</span>
            </div>
            <div class="detail-row">
              <span class="label">任务名称:</span>
              <span class="value">{{ selectedTask.name }}</span>
            </div>
            <div class="detail-row">
              <span class="label">任务类型:</span>
              <el-tag :type="selectedTask.type === '弹药' ? 'danger' : 'warning'">
                {{ selectedTask.type }}
              </el-tag>
            </div>
            <div class="detail-row">
              <span class="label">特种车辆:</span>
              <span class="value">{{ selectedTask.vehicle }}</span>
            </div>
            <div class="detail-row">
              <span class="label">状态:</span>
              <el-tag :type="statusTagType(selectedTask.status)">
                {{ selectedTask.status }}
              </el-tag>
            </div>
            <div class="detail-row">
              <span class="label">创建时间:</span>
              <span class="value">{{ selectedTask.createTime }}</span>
            </div>
          </div>

          <div class="detail-section">
            <h3>任务数据</h3>
            <div class="data-chart">
              <div class="chart-container">
                <v-chart class="chart" :option="taskDataChart" autoresize />
              </div>
            </div>
          </div>

          <div class="detail-section">
            <h3>规则引擎分析</h3>
            <div class="rule-analysis">
              <div v-for="(rule, index) in selectedTask.rules" :key="index" class="rule-item">
                <i class="el-icon-success" style="color: #67C23A"></i>
                <span>{{ rule }}</span>
              </div>
            </div>
          </div>
        </div>

        <div v-else class="no-task-selected">
          <i class="el-icon-document"></i>
          <p>请从左侧列表中选择一个任务查看详情</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, reactive } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart, BarChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'

use([
  CanvasRenderer,
  PieChart,
  BarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
])

export default {
  components: {
  },
  setup() {
    // 规则引擎配置数据
    const activeRuleTab = ref('ammo')
    const ammoType = ref('armor-piercing')
    const ammoThreshold = ref(70)
    const ammoRules = ref(['高温告警', '存储超期'])
    const missileType = ref('surface-to-air')
    const maintenanceCycle = ref(90)
    const missileRules = ref(['制导系统异常', '电子元件故障'])

    // 任务筛选条件
    const taskFilter = ref('')
    const dateRange = ref([])

    // 任务数据
    const tasks = ref([
      { id: 'T20230912001', name: '弹药库存检查', type: '弹药', vehicle: '装甲运输车A', status: '待下发', createTime: '2023-09-12 08:30', rules: ['高温告警', '存储超期'] },
      { id: 'T20230912002', name: '导弹系统诊断', type: '导弹', vehicle: '导弹发射车B', status: '执行中', createTime: '2023-09-11 14:20', rules: ['制导系统异常'] },
      { id: 'T20230911005', name: '弹药湿度检测', type: '弹药', vehicle: '装甲运输车C', status: '已完成', createTime: '2023-09-10 10:15', rules: ['湿度超标'] },
      { id: 'T20230910003', name: '导弹推进剂检测', type: '导弹', vehicle: '导弹发射车D', status: '已完成', createTime: '2023-09-09 16:45', rules: ['推进剂泄漏'] },
      { id: 'T20230909004', name: '弹药消耗分析', type: '弹药', vehicle: '装甲运输车E', status: '已取消', createTime: '2023-09-08 09:10', rules: [] },
    ])

    // 任务统计
    const taskStats = computed(() => {
      return {
        total: tasks.value.length,
        pending: tasks.value.filter(t => t.status === '待下发').length,
        executing: tasks.value.filter(t => t.status === '执行中').length,
        completed: tasks.value.filter(t => t.status === '已完成').length,
        canceled: tasks.value.filter(t => t.status === '已取消').length
      }
    })

    // 任务筛选
    const filteredTasks = computed(() => {
      if (!taskFilter.value) return tasks.value
      return tasks.value.filter(task => task.status === taskFilter.value)
    })

    // 选中的任务
    const selectedTask = ref(null)

    // 任务数据图表
    const taskDataChart = reactive({
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '弹药分析',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 35, name: '穿甲弹' },
            { value: 25, name: '高爆弹' },
            { value: 20, name: '烟雾弹' },
            { value: 15, name: '照明弹' },
            { value: 5, name: '训练弹' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    })

    // 状态标签类型
    const statusTagType = (status) => {
      switch(status) {
        case '待下发': return 'warning'
        case '执行中': return 'primary'
        case '已完成': return 'success'
        case '已取消': return 'info'
        default: return ''
      }
    }

    // 查看任务详情
    const viewTaskDetail = (task) => {
      selectedTask.value = task
      // 根据任务类型更新图表
      if (task.type === '弹药') {
        taskDataChart.series[0].data = [
          { value: 35, name: '穿甲弹' },
          { value: 25, name: '高爆弹' },
          { value: 20, name: '烟雾弹' },
          { value: 15, name: '照明弹' },
          { value: 5, name: '训练弹' }
        ]
      } else {
        taskDataChart.series[0].data = [
          { value: 40, name: '地对空导弹' },
          { value: 30, name: '反坦克导弹' },
          { value: 20, name: '巡航导弹' },
          { value: 10, name: '弹道导弹' }
        ]
      }
    }

    // 下发任务
    const dispatchTask = (task) => {
      task.status = '执行中'
      // 在实际应用中，这里会调用API下发任务
      ElMessage.success(`任务 ${task.id} 已成功下发`)
    }

    return {
      activeRuleTab,
      ammoType,
      ammoThreshold,
      ammoRules,
      missileType,
      maintenanceCycle,
      missileRules,
      taskFilter,
      dateRange,
      tasks,
      taskStats,
      filteredTasks,
      selectedTask,
      taskDataChart,
      statusTagType,
      viewTaskDetail,
      dispatchTask
    }
  }
}
</script>

<style scoped>
.task-management-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f7fa;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  background: linear-gradient(135deg, #1a2a6c, #2a5298);
  color: white;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.system-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.system-title h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.main-content {
  display: flex;
  flex: 1;
  padding: 20px;
  gap: 20px;
  overflow: hidden;
}

.rule-engine-panel, .task-list-panel, .task-detail-panel {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.panel-title {
  margin-top: 0;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
  color: #303133;
  font-size: 18px;
}

.rule-engine-panel {
  width: 300px;
}

.task-list-panel {
  flex: 1;
}

.task-detail-panel {
  width: 350px;
}

.rule-tabs {
  flex: 1;
}

.rule-actions {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.task-filters {
  display: flex;
  gap: 10px;
}

.task-statistics {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.stat-card {
  background: #f5f7fa;
  border-radius: 6px;
  padding: 15px;
  text-align: center;
  flex: 1;
  margin: 0 5px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-top: 5px;
}

.detail-content {
  flex: 1;
  overflow-y: auto;
}

.detail-section {
  margin-bottom: 25px;
}

.detail-section h3 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #303133;
  font-size: 16px;
}

.detail-row {
  display: flex;
  margin-bottom: 12px;
  align-items: center;
}

.label {
  width: 80px;
  color: #606266;
  font-size: 14px;
}

.value {
  flex: 1;
  color: #303133;
  font-size: 14px;
}

.data-chart {
  height: 250px;
}

.chart-container {
  width: 100%;
  height: 100%;
}

.chart {
  width: 100%;
  height: 100%;
}

.rule-analysis {
  background: #f5f7fa;
  border-radius: 6px;
  padding: 15px;
}

.rule-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.rule-item i {
  margin-right: 8px;
}

.no-task-selected {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #909399;
}

.no-task-selected i {
  font-size: 60px;
  margin-bottom: 20px;
}

.no-task-selected p {
  margin: 0;
  font-size: 16px;
}
</style>